<template>
  <div>
    <div style="margin-bottom:10px">
      <el-button size="mini" type="success" @click="changeComponents('TimePickerVue')">时间日期选择器</el-button>
      <el-button size="mini" type="success" @click="changeComponents('DynamicTable')">动态Table</el-button>
      <el-button size="mini" type="success" @click="changeComponents('Tree')">树</el-button>
      <el-button size="mini" type="success" @click="changeComponents('lazyTree')">懒加载树</el-button>
      <el-button size="mini" type="success" @click="changeComponents('Dialog')">弹出框</el-button>
      <el-button size="mini" type="success" @click="changeComponents('SelectTable')">表格选择组件</el-button>
      <el-button size="mini" type="success" @click="changeComponents('SelectTree')">树选择组件</el-button>
      <el-button size="mini" type="success" @click="changeComponents('TableLazyTree')">树状表格懒加载和局部节点刷新</el-button>
    </div>
    <components
      :is="currentComponents"
    ></components>
  </div>
</template>

<script>
// 时间日期选择器
import TimePickerVue from './TimePicker/index.vue'
// 动态Table
import DynamicTable from './DynamicTable'
// 树
import Tree from './Tree'
import lazyTree from './Tree/lazyTree.vue'
// 弹出框
import Dialog from './Dialog'
// 表格选择
import SelectTable from './SelectTable'
// 树选择
import SelectTree from './SelectTree'
// 懒加载树和局部节点刷新
import TableLazyTree from './TableLazyTree'
export default {
  name: 'CommonComponents',
  components: { TimePickerVue, DynamicTable, Tree, lazyTree, Dialog, SelectTable, SelectTree, TableLazyTree },
  data () {
    return {
      currentComponents: ''
    }
  },
  methods: {
    changeComponents (str) {
      this.currentComponents = str
    }
  }
}
</script>

<style>
</style>
